/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-22 16:19:19
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-04 09:17:36
 * @FilePath: \cxl-driving-training\src\views\column\content\index.ts
 */
import { BaseData, BaseMethod } from '@/utils/basc-data'
import { tableConfig } from './config'
import { reactive, ref, watchEffect } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { formDataInterface, PropsFormpData } from '@/utils/interface'
import { ImageConfig, VideoConfig, listConfig } from './formConfig'
import {
    columnContentCreate,
    columnContentEdit,
    columnContentList,
    columnContentOperation,
    columnContentPageInterface,
    columnContentPublish,
    columnList
} from '@/apis/column'
import { DICT_DATA, optionsInterface } from '@/utils/dict-data'

interface columnNameType {
    label: string
    value: string
    type: string
    location: string
    columnId: string
}

const tagOptions: optionsInterface[] = [...DICT_DATA.get('contentTag')]

export default class ColumnContentData extends BaseData implements BaseMethod {
    dialog = reactive({
        visible: false,
        title: '新增内容',
        width: '1000px',
        type: 'create',
        id: ''
    })
    formData = reactive<PropsFormpData[]>([...listConfig])
    imageData = reactive<formDataInterface[][]>([])
    videoData = reactive<formDataInterface[][]>([])
    searchData = {
        contentTitle: ''
    }
    //所有的栏目名称
    columnNameArray: columnNameType[] = []
    //监听栏目名称选择的栏目名
    selectColumnName: columnNameType = {
        label: '',
        value: '',
        type: '',
        location: '',
        columnId: ''
    }
    //投放位置
    location = ['首页']
    //栏目形式
    type = ['视频', '图文', '图片']
    //设置栏目名称所选择的展示类型 图片 | 视频
    columnType = reactive({
        index: 0,
        type: 0
    })
    constructor() {
        super(tableConfig)
        this.getData()

        watchEffect(() => {
            // console.log(this.formData[0][0].value)
            // this.columnType.index = Number(this.formData[0][0].value)
            // //监听栏目名称选择的栏目名
            // this.selectColumnName = this.columnNameArray.find((item: columnNameType) => {
            //     return Number(item.value) === this.columnType.index
            // }) || {
            //     label: '',
            //     value: '',
            //     type: '',
            //     location: '',
            //     columnId: ''
            // }
            // //根据选择的栏目名设置投放位置及栏目形式
            // console.log('selectColumnName', this.selectColumnName)
            // this.formData[0][1].value = this.location[Number(this.selectColumnName.location) - 1]
            // this.formData[1][0].value = this.type[Number(this.selectColumnName.type) - 1]
            // this.columnType.type = Number(this.selectColumnName.type)
            // console.log(this.selectColumnName.type, this.type[Number(this.selectColumnName.type) - 1])
        })

        columnList({
            current: 1,
            size: 100
        }).then(res => {
            if (Number(res.data.code) === 200) {
                // const arr: any[] = res.data.result.records
                // this.formData[0][0].options = []
                // this.columnNameArray.length = 0
                // arr.forEach((element: any, index: number) => {
                //     if (Number(element.disable) === 0) {
                //         this.formData[0][0].options?.push({ label: element.name, value: index + '' })
                //         this.columnNameArray.push({
                //             label: element.name,
                //             value: index + '',
                //             type: element.type,
                //             location: element.location,
                //             columnId: element.id
                //         })
                //     }
                // })
            }
        })
    }
    getData = (arg?: any) => {
        const params: columnContentPageInterface = {
            current: this.pageData.pagination.pageNo,
            size: this.pageData.pagination.pageSize
        }
        if (this.searchData.contentTitle) {
            params.contentTitle = this.searchData.contentTitle
        }
        columnContentList(params).then(res => {
            if (Number(res.data.code) === 200) {
                this.pageData.table.data.length = 0
                this.pageData.pagination.total = res.data.result.total
                const arr: any[] = res.data.result.records
                arr.forEach((element: any) => {
                    element.status = Number(element.disable) === 0 ? true : false
                    element.name = element.columnInfo.name
                    element.tag = Number(element.contentTag) > 0 ? tagOptions[Number(element.contentTag) - 1].label : ''
                    this.pageData.table.data.push(element)
                })
            }
        })
    }
    onSearch = (arg?: any) => {
        console.log(arg)
        this.searchData = arg
        this.getData()
    }
    onReset = (arg?: any) => {
        this.searchData = {
            contentTitle: ''
        }
        this.getData()
    }
    onPaginationChange = (arg?: any) => {
        this.pageData.pagination.pageNo = arg
        this.getData()
    }
    onPaginationSize = (arg?: any) => {
        this.pageData.pagination.pageNo = 1
        this.pageData.pagination.pageSize = arg
        this.getData()
    }
    onOperation = (arg?: any) => {
        const { type, data } = arg
        console.log(type, data)
        if (type === 'create') {
            this.dialog.visible = true
            this.dialog.type = type
            this.dialog.title = '新增内容'
            // this.formData[0][0].value = ''
            // this.formData[1][1].value = ''
            // this.formData[2][0].value = ''
            // this.formData[3][0].value = [{ key: '', tag: '', index: '' }]
            this.videoData[0][0].value = [{ key: '', tag: '', index: '' }]
            this.imageData[0][0].value = ''
        } else if (type === 'edit') {
            this.dialog.visible = true
            this.dialog.type = type
            this.dialog.title = '编辑内容'
            this.dialog.id = data.id
            // this.columnNameArray.forEach((item: columnNameType, index: number) => {
            //     if (item.columnId === data.columnInfo.id) {
            //         this.formData[0][0].value = index + ''
            //     }
            // })
            // this.formData[1][1].value = data.contentTitle + ''
            // this.formData[2][0].value = Number(data.contentTag) === 0 ? '' : data.contentTag + ''
            // //封面图
            // this.formData[3][0].value = [{ key: data.coverPic as string, tag: '', index: '' }]

            // this.videoData[0][0].value = [{ key: data.contentInfo as string, tag: '', index: '' }]
            // this.imageData[0][0].value = data.contentInfo as string
        } else if (type === 'delete') {
            //
        } else if (type === 'switch') {
            //
        } else if (type === 'revocation') {
            //发布状态（0.待发布；1.已发布；2.已撤回）
            columnContentPublish(2, data.id).then((res: any) => {
                if (Number(res.data.code) === 200) {
                    this.getData()
                    ElMessage.success('撤回成功')
                }
            })
        } else if (type === 'publish') {
            columnContentPublish(1, data.id).then((res: any) => {
                if (Number(res.data.code) === 200) {
                    this.getData()
                    ElMessage.success('发布成功')
                }
            })
        }
    }
    //监听弹窗关闭
    onCloseDialog = () => {
        this.dialog.visible = false
    }
    //监听弹窗点击确定按钮
    submitForm = async (formEl: any, imageEl: any, videoEl: any) => {
        if (formEl?.validateForm()) {
            console.log(Number(this.selectColumnName.type), videoEl?.validateForm(), imageEl?.validateForm())
            if (Number(this.selectColumnName.type) === 1 && !videoEl?.validateForm()) {
                return false
            } else if (Number(this.selectColumnName.type) !== 1 && !imageEl?.validateForm()) {
                return false
            }

            const data: columnContentOperation = {
                columnId: this.selectColumnName.columnId,
                contentInfo: '',
                contentTag: 0,
                contentTitle: '',
                coverPic: ''
            }
            // this.formData.forEach((child: formDataInterface[]) => {
            //     child.forEach((item: formDataInterface) => {
            //         console.log(item)
            //         if (item.key === 'contentTag') {
            //             data.contentTag = item.value as number
            //         } else if (item.key === 'contentTitle') {
            //             data.contentTitle = item.value as string
            //         } else if (item.key === 'coverPic') {
            //             data.coverPic = (item.value as any[])[0].key as string
            //         }
            //     })
            // })
            if (Number(this.selectColumnName.type) === 1) {
                //视频
                this.videoData.forEach((child: formDataInterface[]) => {
                    child.forEach((item: formDataInterface) => {
                        console.log(item)
                        if (item.key === 'contentInfo') {
                            data.contentInfo = (item.value as any[])[0].key as string
                        }
                    })
                })
            } else {
                //图片 | 图文
                this.imageData.forEach((child: formDataInterface[]) => {
                    child.forEach((item: formDataInterface) => {
                        console.log(item)
                        if (item.key === 'contentInfo') {
                            data.contentInfo = item.value as string
                        }
                    })
                })
            }
            console.log('data', data)
            if (this.dialog.type === 'create') {
                columnContentCreate(data).then(res => {
                    if (Number(res.data.code) === 200) {
                        ElMessage.success('新增成功！')
                        this.dialog.visible = false
                        this.getData()
                    }
                })
            } else {
                data.id = this.dialog.id
                columnContentEdit(data).then(res => {
                    if (Number(res.data.code) === 200) {
                        ElMessage.success('修改成功！')
                        this.dialog.visible = false
                        this.getData()
                    }
                })
            }
        }
    }
}
